<svg x="0" y="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="cloud">
    <path d="M55.7,5A23.94,23.94,0,0,0,34.37,18.05a9.9,9.9,0,0,0-12.78,5.56,15,15,0,0,0-1.71-.1A14.81,14.81,0,0,0,9.2,28,14.63,14.63,0,0,0,5,38.17v.21A14.83,14.83,0,0,0,19.88,53.06H75.59a14.3,14.3,0,0,0,3.67-28.14A23.93,23.93,0,0,0,55.7,5Z"></path>
    <image x="5" y="14" width="85" height="43" xlink:href=""></image>
  </symbol>
  <symbol id="moon">
    <path d="M28.43,0A28.44,28.44,0,0,1,32.3,14.32,28.61,28.61,0,0,1,3.69,42.93,28.71,28.71,0,0,1,0,42.66,28.59,28.59,0,1,0,28.43,0Z" fill="url(#moon-grad)"></path>
  </symbol>

  <defs>
    <mask id="cloud_43_37_063_063_5">
    <rect x="0" y="0" width="100" height="100" fill="white"></rect>
    <use xlink:href="#cloud" fill="black" stroke="black" stroke-linejoin="round" stroke-width="10" x="0" y="0" width="100" height="100" transform="translate(43,37) scale(0.63,0.63)"></use>
  </mask>
    <linearGradient id="moon-grad" x1="0%" y1="50%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#686e73" />
      <stop offset="100%" stop-color="#6a7075" />
    </linearGradient>
  </defs>
  <symbol id="s02n">
    <g mask="url(#cloud_43_37_063_063_5)">
      <use xlink:href="#moon"  x="0" y="0" width="100" height="100" transform="translate(15,20) scale(1,1)"></use>
    </g>
    <use xlink:href="#cloud" fill="#dddddd" x="0" y="0" width="100" height="100" transform="translate(43,37) scale(0.63,0.63)"></use>
  </symbol>
  <use xlink:href="#s02n" x="0" y="0" width="100" height="100"></use>
</svg>